<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>攻略</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/reset.css">
        <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css">
            <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/main.css">
    <script src="./iconfont.js"></script>
    <script src="../assets/js/vue.min.js"></script>
    <script src="../assets/js/echarts.min.js"></script>
    <style type="text/css">
        .icon {
           width: 1em; height: 1em;
           vertical-align: -0.15em;
           fill: currentColor;
           overflow: hidden;
        }
        .echarts_table .icon{
          color:red;
        }
        .titleIcon{
          position: absolute;
          right:5px;
          top:11px;
        }
    </style>
  </head>
  <body id="target" >
    <div id="app" style="height:100%;width:100%">


      <div class="topMenu">
        <span class="topMenu_home">星月区 fdfdfdfdfd</span>
        <span class="topMenu_people">个人中心</span>
      </div>


      <div class="echarts_mainAll" >
        <div id="myChart" :style="{width: '300px', height: '300px',margin:'0 auto'}"></div>
        <div class="echarts_inputSendBox">
            <input type="number" v-model="msgNumber" class="echarts_input" />
            <div class="echarts_select">
                <div class="echarts_select_title" @click="select_titleClick">{{ selectTitle }}</div>
                <svg class="icon titleIcon" aria-hidden="true" >
                        <use :xlink:href="arrow"></use>
                </svg>
                <div class="echarts_select_ul" v-if="selectTitleIsShow">
                    <div class="echarts_select_li" @click="echarts_select('剩余耐久')">剩余耐久</div>
                    <div class="echarts_select_li" @click="echarts_select('拆迁与行军时间')">拆迁与行军时间</div>

                </div>
            </div>
            <div class="echarts_send">发送</div>
        </div>

        <table class="echarts_table" style="table-layout:fixed">
            <thead>
               <tr>
                 <th style="width:33%;">拆迁值</th>
                 <th style="width:33%;">行军时间</th>
                 <th style="width:33%;">出发时间</th>
               </tr>
             </thead>
<!--            <colgroup >
             <col width="60">
             <col width="220px">
             <col width="">
           </colgroup> -->
           <tbody>
             <tr>
               <td style="width:33%;height:30px;">100</td>
               <td style="width:33%;height:30px;">7:12</td>
               <td style="width:33%;height:30px;">14:58:27 
                <svg class="icon" aria-hidden="true" v-if="tableIcon[0]" @click="tableIconClick(0)">
                    <use xlink:href="#icon-warning-circle-o"></use>
                </svg>
               </td>
             </tr>
             <tr>
               <td style="width:33%;height:30px;">100</td>
               <td style="width:33%;height:30px;">7:12</td>
               <td style="width:33%;height:30px;">14:58:27 
                  <svg class="icon" aria-hidden="true" v-if="tableIcon[1]" @click="tableIconClick(1)">
                      <use xlink:href="#icon-warning-circle-o"></use>
                  </svg>
              </td>
             </tr>
           </tbody>
         </table>




        <div class="echarts_Bar">
            <div class="echarts_Bar_cell">发送</div>
            <div class="echarts_Bar_cell">20180523</div>
            <div class="echarts_Bar_cell">托管</div>
        </div>    
      </div>
    </div>
    <script type="text/javascript">

      var Vue = new Vue({
        el: '#app',
        components:{},
        data: {
          color: ['#4fa8f9','#6ec71e'],
          msgNumber:'',
          tableIcon:[true,true],
          selectTitle:'剩余耐久',
          selectTitleIsShow:false,
          // arrow:'#icon-jiantoushang',
          arrow:'#icon-jiantouxia'
        },
        mounted:function(){
          this.drawLine()
        },
        methods: {
          select_titleClick(){
            this.selectTitleIsShow = true
            this.arrow = '#icon-jiantoushang'
          },
          echarts_select(str){
            this.selectTitle = str
            this.selectTitleIsShow = false
            this.arrow = '#icon-jiantouxia'
          },
          
          tableIconClick(index){
            this.tableIcon.splice(index,1,false)
          },
         drawLine(){
            let myChart = echarts.init(document.getElementById('myChart'))
            var data = [];
            for (var i = 0; i <= 100; i++) {
                var theta = i / 100 * 60;
                var r = 5 * (1 + Math.sin(theta / 180 * Math.PI));
                data.push([r, theta]);
            }
            var data2 = [];
            for (var i = 0; i <= 100; i++) {
                var theta2 = i / 100 * 60;
                var r = 2 * (1 + Math.sin(theta2 / 180 * Math.PI));
                data2.push([r, theta2]);
            }
            let option = {
                title: {
                    // text: '数据对比'
                    text: ''
                },
                legend: {
                    data: ['line']
                },
                polar: {},
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                angleAxis: {
                    type: 'value',
                    startAngle: 90,
                    interval: 5,
                    clockwise: true, //是否逆时针

                },
                radiusAxis: {
                },
                color: this.color,
                series: [
                    {
                        coordinateSystem: 'polar',
                        symbol: "none",
                        // name: 'line',
                        itemStyle:{
                          normal:{
                            lineStyle:{
                              color:this.color[0],
                            }
                          }
                        },
                        type: 'line',
                        data: data
                    },
                    {
                        coordinateSystem: 'polar',
                        symbol: "none",
                        // name: 'line',
                        itemStyle:{
                          normal:{
                            lineStyle:{
                              color:this.color[1],
                            }
                          }
                        },
                        type: 'line',
                        data: data2
                    }
                ]
            };
            myChart.setOption(option)



          }
        
        },

      })

   
    </script>
  </body>
</html>
 